<template>
    <div class="form">
        <el-form label-width="auto" :rules="formRules" ref="formRef":model="user">
            <el-form-item label="用户名" prop="number">
                <el-input v-model="user.number" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="user.department" placeholder="请选择你的部门">
                <el-option label="开发部" value="开发部" />
                <el-option label="测试部" value="测试部" />
                <el-option label="销售部" value="销售部" />
                </el-select>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="user.password" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="name">
                <el-input v-model="user.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="user.gender">
                <el-radio value="男">男</el-radio>
                <el-radio value="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="邮箱" prop="mailbox">
                <el-input v-model="user.mailbox" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="user.phone" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="user.status" class="ml-4">
                <el-radio value="0" size="large">停用</el-radio>
                <el-radio value="1" size="large">正常</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="info"@click ="cancel">取消</el-button>
                <el-button type="primary"@click="save(formRef)">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import http from '@/utils/http'
import { onBeforeMount } from 'vue'
let router = useRouter()
let user = ref({
    id: router.currentRoute.value.query.id,
    number: '',
    department: '',
    password: '',
    name: '',
    mailbox: '',
    phone: '',
    gender: '',
    status: ''
})
let formRef = ref(null)
let formRules = ref({
    number: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    mailbox: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入', trigger: 'blur' }
    ]
})
onBeforeMount(async()=>{
    if(user.value.id){
        let resp = await http.get(`/user/get/${user.value.id}`)
        user.value = resp.data
    }
})
async function save(formRef){
    formRef.validate(async function(valid){
        if(valid){
            let path = user.value.id ? '/user/update' : '/user/add'
            let tip = user.value.id ? '修改' : '新增'
            let resp = await http.post(path,user.value)
            if(resp.code == 200){
            ElMessageBox.alert(tip+'用户成功', tip+'用户', {
            confirmButtonText: 'OK'
          })
            router.go(-1)
          }else{
            
          }
        }
    })
}
function cancel(){
    router.go(-1)
}
</script>
<style lang="css" scoped>
.form {
    width:400px;
    margin: 0 auto;
}
.el-form-item__label {
    width: 120px;
}
</style>